<!DOCTYPE html>
<html>
  <head>
    <title>SIMILE Widgets | Exhibit | Examples | U.S. Presidents</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <link rel='stylesheet' href='http://www.simile-widgets.org/styles/common.css' type='text/css' />
    
    <link href="schema.js" type="application/json" rel="exhibit/data" />
    <link href="presidents.js" type="application/json" rel="exhibit/data" />
    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/current/exhibit-api.js -->
    <script src="../api/exhibit-api.js"></script>

    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/current/extensions/time/time-extension.js -->
    <link rel="exhibit-extension" type="text/javascript" href="../api/extensions/time/time-extension.js" />
    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/current/extensions/time/time-extension.js -->
    <link rel="exhibit-extension" href="../api/extensions/map/map-extension.js" data-ex-apikey="AIzaSyCDO3EXWKJms5T38db48czFJZDunhYIzn8" />
    <!-- Replace the above apiKey with your own (this one will eventually stop working) -->
    
    <link rel='stylesheet' href='styles.css' type='text/css' />
<style>
.logo {
   text-align: center
}
.lens-table {
width: 100%
}
.lens-table td {
   padding: 10px
}
</style>
  </head>

  <body>
    <ul id="path">
      <li><a href="http://www.simile-widgets.org/">SIMILE Widgets</a></li>
      <li><a href="http://www.simile-widgets.org/exhibit/">Exhibit</a></li>
      <li><a href="..">Demos</a></li>
      <li><span>Examples: U.S. Presidents</span></li>
    </ul>
    
    <div data-ex-role="collection" data-ex-item-types="President"></div>
    <table id="frame">
        <tr>
            <td id="sidebar">
                <h1>US Presidents</h1>
                <p>Here is the <a href="presidents.js" target="_blank">Exhibit JSON data file</a>.
                
                <div id="exhibit-browse-panel">
                    <b>Search:</b>
                    <div data-ex-role="facet" data-ex-facet-class="TextSearch"></div>
                    <hr/>
                    <div data-ex-role="facet" data-ex-expression=".religion" data-ex-facet-label="Religions" data-ex-height="20em"></div>

                    <div data-ex-role="facet" data-ex-expression=".party" data-ex-facet-label="Political Parties" data-ex-height="10em" data-ex-color-coder="party-colors"></div>
                    <div data-ex-role="facet" data-ex-expression=".dieInOffice" data-ex-facet-label="Died In Office" data-ex-height="4em"></div>
                    <div class="logo" data-ex-role="logo" data-ex-color="DeepSkyBlue"></div>
                </div>
            </td>
            <td id="content">
                <div data-ex-role="coder" data-ex-coder-class="Color" id="party-colors" style="display: none;">
                    <span data-ex-color="red">Republican</span>
                    <span data-ex-color="blue">Democratic</span>
                    
                    <span data-ex-case="others"  data-ex-color="#aaa">Other parties</span>
                    <span data-ex-case="mixed"   data-ex-color="#eee">Many parties</span>
                    <span data-ex-case="missing" data-ex-color="#444">No party</span>
                </div>
                
                <div class="item" data-ex-role="lens" style="display: none;">
                    <table class="lens-table">
                        <tr>
                            <td><img data-ex-src-content=".imageURL" 
                            alt="portrait"/></td>
                            <td>
                                <a data-ex-href-content=".url"><span data-ex-content=".label"></span></a>
                                <div>Terms: <span data-ex-content=".term"></span>, <span data-ex-content=".party"></span></div>
                                <div>Religions: <span data-ex-content=".religion"></span></div>
                                <div>Birth: <span data-ex-content=".birth"></span>, <span data-ex-content=".birthPlace"></span></div>
                                <div data-ex-if-exists=".death">Death: <span data-ex-content=".death"></span>, <span data-ex-content=".deathPlace"></span></div>
                                <div data-ex-control="item-link"></div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div data-ex-role="coordinator" id="president"></div>
                
                <div data-ex-role="view"
                    data-ex-formats="date { mode: medium; show: date }"
                    data-ex-view-class="Timeline"
                    data-ex-label="Terms"
                    data-ex-proxy=".presidency"
                    data-ex-start=".inDate"
                    data-ex-end=".outDate"
                    data-ex-color-key=".party"
                    data-ex-color-coder="party-colors"
		    data-ex-autoposition="true"
                    data-ex-bubble-width="320"
                    data-ex-top-band-pixels-per-unit="400"
                    data-ex-select-coordinator="president"
                    data-ex-show-summary="false"
                    data-ex-timeline-height="170"
                    >
                </div>
                    
                <div data-ex-role="viewPanel" data-ex-initial-view="0"                         data-ex-formats="date { mode: medium; show: date }"
>
                    <div class="map-lens" data-ex-role="lens" style="display: none;">
                        <div><img data-ex-src-content=".imageURL"
                        alt="portrait" /></div>
                        <div data-ex-content=".label"></div>
                        <div data-ex-content=".birthPlace"></div>
			<div data-ex-content=".birth"></div>
                    </div>
                    <div data-ex-role="view"
                        data-ex-view-class="Map"
                        data-ex-label="Birth Places with Photos"
			data-ex-mapheight="430"
                        data-ex-latlng=".birthLatLng"
                        data-ex-center="38.479394673276445, -115.361328125"
                        data-ex-zoom="3"
                        data-ex-bubble-width="200"
                        data-ex-icon=".imageURL"
                        data-ex-shape-width="60"
                        data-ex-shape-height="60"
                        data-ex-select-coordinator="president"
                        >
                    </div>
                    <div data-ex-role="view"
                        data-ex-view-class="Map"
                        data-ex-label="Death Places (by Party)"
                        data-ex-latlng=".deathLatLng"
                        data-ex-autoposition = "true"
                        data-ex-max-auto-zoom = "7"
                        data-ex-bubble-width="200"
                        data-ex-color-key=".party"
                        data-ex-color-coder="party-colors"
                        data-ex-select-coordinator="president"
                        >
                    </div>
                    <div data-ex-role="view"
                        data-ex-view-class="Tabular"
                        data-ex-label="Details"
                        data-ex-columns=".term, .label, .party, .presidency.inDate, .presidency.outDate, add(foreach(.presidency, date-range(.inDate, default(.outDate, now()), 'day'))), .birth, .death"
                        data-ex-column-labels="term, name, party, took office, left office, days in office, age of ascension, age"
                        data-ex-formats="date { mode: medium; show: date }"
                        data-ex-sort-column="3"
                        data-ex-sort-ascending="false"
                        data-ex-paginate="true"
                        data-ex-page-size="5"
                        >
                        <table style="display: none;">
                            <tr data-ex-background-style-content="if(exists(.death), '#ccc', 'white')">
                                <td><span data-ex-content=".term"></span></td>
                                <td><b data-ex-content=".label"></b><br/><img data-ex-src-content=".imageURL" alt="portrait"/></td>
                                <td><span data-ex-content=".party"></span></td>
                                <td><span data-ex-content=".presidency.inDate"></span></td>
                                <td><span data-ex-content=".presidency.outDate"></span></td>
                                <td><span data-ex-content="add(foreach(.presidency, date-range(.inDate, default(.outDate, now()), 'day')))"></span></td>
                                <td><span data-ex-content="foreach(.presidency, date-range(!presidency.birth, .inDate, 'year')))"></span></td>
                                <td><span data-ex-content="date-range(.birth, default(.death, now()), 'year')))"></span></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </table>
  </body>
</html>
